<template>
	<view class="main">
		<u-navbar :is-back="true" :title="i18n.navbar.order_details" :background="background" :border-bottom="false"
			title-color="#000000" back-icon-color="#000"></u-navbar>
		<view class="alls">
			<view class="state">
				<text v-if="details.status==0">{{i18n.order.order_details.Not_shipped}}</text>
				<text v-if="details.status==1">{{i18n.order.order_details.pending_receipt}}</text>
				<text v-if="details.status==2">{{i18n.order.order_details.received}}</text>
				<text v-if="details.status==3">{{i18n.order.order_details.completed}}</text>
				<text v-if="details.status==9">{{i18n.order.order_details.cancell}}</text>
			</view>
			<view class="user">
				<view class="name">
					<text class="title">{{i18n.order.order_details.username}}：</text>
					<text class="rel">{{details.nikeName}}</text>
				</view>
				<view class="name">
					<text class="title">{{i18n.order.order_details.email}}：</text>
					<text class="rel">{{details.userEmail}}</text>
				</view>
			</view>
			<view class="userinfo">
				<view class="info_t">
					<view class="infot_l">
						<text class="info_tit">{{i18n.order.order_details.name}}：</text>
						<text>{{details.realName}}</text>
					</view>
					<view class="infot_l">
						<text class="info_phone">{{i18n.order.order_details.phone}}：</text>
						<text>{{details.userPhone}}</text>
					</view>
				</view>
				<view class="info_b">
					<view class="address">
						<text class="info_tit">{{i18n.order.order_details.address}}：</text>
						<text>{{details.userAddress}}</text>
					</view>
					<view class="address">
						<text class="info_tit">{{i18n.order.order_details.mailbox}}：</text>
						<text>{{details.email}}</text>
					</view>
				</view>
			</view>

			<view class="shop" v-for="(item,index) in details.orderInfo" :key="index">
				<view class="shop_l">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="shop_r">
					<view class="shop_tit">
						{{item.productName}}
					</view>
					<view class="shop_style">
						<text>{{i18n.order.order_details.Specification}}：{{item.sku}}</text>
						<text>{{i18n.order.order_details.weight}}：{{item.weight}}kg</text>
					</view>
					<view class="shop_size">
						{{i18n.order.order_details.volume}}：{{item.volume}}m³
					</view>
					<view class="shop_money">
						¥{{item.price}}
					</view>
				</view>
			</view>
			<view class="quantity">
				<view class="shop_quantit">
					<text class="title">{{i18n.order.order_details.total}}：</text>
					<text>{{details.totalNum}}</text>
				</view>
				<view class="shop_quantit">
					<text class="title">{{i18n.order.order_details.postage}}：</text>
					<text>¥{{details.payPostage}}</text>
				</view>
				<view class="shop_quantit">
					<text class="title">{{i18n.order.order_details.coupon}}：</text>
					<text>¥{{details.couponPrice}}</text>
				</view>
				<view class="shop_quantit">
					<text class="title">{{i18n.order.order_details.pay_true}}：</text>
					<text class="pay_true">¥{{details.payPrice}}</text>
				</view>
			</view>

			<view class="order">
				<view class="order_tit">
					{{i18n.order.order_details.order_info}}
				</view>
				<view class="order_info">
					<text class="title">{{i18n.order.order_details.ordermain}}：</text>
					<text>{{details.masterOrderNo}}</text>
				</view>
				<view class="order_info">
					<text class="title">{{i18n.order.order_details.pay_type}}：</text>
					<text>{{details.payType}}</text>
				</view>
				<view class="order_info">
					<text class="title">{{i18n.order.order_details.pay_status}}：</text>
					<text>{{details.paid?i18n.order.order_details.paid:i18n.order.order_details.no_pay}}</text>
				</view>
				<view class="order_info">
					<text class="title">{{i18n.order.order_details.creat_time}}：</text>
					<text>{{details.createTime}}</text>
				</view>
			</view>
			<view class="user_remaker">
				<view class="remaker_tit">
					{{i18n.order.order_details.usercomments}}
				</view>
				<view class="remake_cont">
					{{details.userRemark}}
				</view>
			</view>
			<view class="user_remaker">
				<view class="remaker_tit">
					{{i18n.order.order_details.merchant_notes}}
				</view>
				<view class="remake_cont">
					{{details.merRemark}}
				</view>
			</view>
		</view>
		<view class="order_rem">
			{{i18n.order.order_details.order_notes}}
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff',
				},
				orderNo: '',
				details: ''
			}
		},

		computed: {
			i18n() {
				return this.$t('message')
			},
		},
		onShow() {
			this.lang()
		},
		onLoad(data) {
			console.log(this.i18n.order.order_details.cancell);
			this.orderNo = data.orderNo
			console.log(this.orderNo);
			this.getdetails()
		},
		methods: {


			// 

			getdetails() {
				global.$http.request({
					url: '/api/admin/merchant/order/info',
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
					data: {
						orderNo: this.orderNo
					}
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data);
						this.details = res.data.data
					}
				})
			},









			lang() {
				this._i18n.locale = uni.getStorageSync('select')
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		padding-bottom: 130rpx;

		.main {
			width: 750rpx;
			height: 100%;

			.alls {
				.state {
					width: 750rpx;
					height: 120rpx;
					background: #304156;
					line-height: 120rpx;

					text {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						padding-left: 41rpx;
					}
				}

				.user {
					padding: 35rpx 27rpx 13rpx 27rpx;
					background-color: #fff;
					margin-bottom: 10rpx;

					.name {
						display: flex;
						align-items: center;
						padding-bottom: 22rpx;

						.title {
							width: 140rpx;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #666666;
						}

						.rel {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;
						}
					}
				}

				.userinfo {
					padding: 32rpx 27rpx;
					background-color: #fff;
					margin-bottom: 10rpx;

					.info_t {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.infot_l {
							display: flex;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;

							.info_tit {
								display: block;
								width: 140rpx;
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #666666;
							}

							.info_phone {
								display: block;
								width: 80rpx;
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #666666;
							}
						}
					}

					.info_b {

						.address {
							display: flex;
							align-items: center;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;
							padding-top: 23rpx;

							.info_tit {
								display: block;
								width: 140rpx;
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #666666;
							}

							.info_phone {
								display: block;
								width: 80rpx;
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #666666;
							}
						}
					}
				}


				.shop {
					margin-bottom: 10rpx;
					background-color: #fff;
					padding: 20rpx 30rpx 18rpx 22rpx;
					display: flex;

					.shop_l {
						padding-top: 7rpx;

						image {
							width: 140rpx;
							height: 140rpx;
						}
					}

					.shop_r {
						padding-left: 21rpx;

						.shop_tit {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;
						}

						.shop_style {
							padding: 14rpx 0;
							display: flex;
							justify-content: space-between;
							font-size: 20rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #4D4D4D;
						}

						.shop_size {
							font-size: 20rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #4D4D4D;
						}

						.shop_money {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #FF1900;
							display: flex;
							justify-content: flex-end;
						}
					}
				}

				.quantity {
					margin-bottom: 10rpx;
					background-color: #fff;
					padding: 25rpx 30rpx 12rpx 20rpx;

					.shop_quantit {
						display: flex;
						justify-content: space-between;
						padding-bottom: 32rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #808080;

						.title {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;
						}

						.pay_true {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;
						}
					}
				}

				.order {
					margin-bottom: 10rpx;
					padding: 30rpx 21rpx;
					background-color: #fff;

					.order_tit {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FF2400;
					}

					.order_info {
						display: flex;
						align-items: center;
						padding-top: 31rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #4C4C4C;

						.title {
							display: block;
							width: 165rpx;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #000000;

						}
					}
				}

				.user_remaker {
					padding: 29rpx 21rpx;
					margin-bottom: 10rpx;
					background-color: #fff;

					.remaker_tit {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FF2400;
					}

					.remake_cont {
						padding: 30rpx 32rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #4C4C4C;
					}
				}

			}

			.order_rem {
				position: fixed;
				bottom: 0;
				width: 750rpx;
				height: 98rpx;
				text-align: center;
				line-height: 98rpx;
				background: #304156;



				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>
